<template>
	<view class="pages">
		<view class="tops">
			<uv-tabs :list="list" @click="click" activeStyle="font-size: 30rpx;color: #121212;"
				inactiveStyle="font-size: 28rpx;color: #666666;" lineColor="linear-gradient(90deg, #DD551B, #F49355)"
				lineWidth="30rpx" lineHeight="6rpx"></uv-tabs>
		</view>
		<view class="contents">
			<view class="all" v-if="currentTab === '全部'">
				<!-- 显示全部内容 -->
				<view class="cards">
					<view class="card" v-for="(item, index) in items" :key="index">
						<view class="top">
							<view class="left" @click="jump">
								<image src="../static/images/supermarket/头像.png" mode="scaleToFill" />
								<view class="name">红月亮超市</view>
							</view>
							<view class="love">+关注</view>
						</view>
						<view class="middle" @click="jump">
							<view class="texts">
								真花摆设向日葵客厅电视柜装饰摆件玄关桌面餐桌花摆花
							</view>
							<view class="price">￥88-826</view>
							<view class="presentation">
								<image v-for="(imgItem, imgIndex) in 3" :key="imgIndex"
									src="../static/images/supermarket/头像.png" mode="scaleToFill" />
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								<view class="people">
									105
									<text>人参与</text>
									<span :class="{
                      'activity-ongoing': item.activityStatus === 'ongoing',
                      'activity-ended': item.activityStatus === 'ended',
                    }">
										{{
                      item.activityStatus === "ongoing"
                        ? "活动进行中"
                        : "活动已结束"
                    }}
									</span>
								</view>
							</view>
							<view class="share">分享商品</view>
						</view>
					</view>
				</view>
			</view>

			<view class="all" v-if="currentTab === '特价专区'">
				<!-- 显示特价专区的内容 -->
				<p>这是特价专区的界面。</p>
				<view class="cards">
					<view class="card" v-for="(item, index) in items" :key="index">
						<view class="top">
							<view class="left">
								<image src="../static/images/supermarket/头像.png" mode="scaleToFill" />
								<view class="name">红月亮超市</view>
							</view>
							<view class="love">+关注</view>
						</view>
						<view class="middle">
							<view class="texts">
								真花摆设向日葵客厅电视柜装饰摆件玄关桌面餐桌花摆花
							</view>
							<view class="price">￥88-826</view>
							<view class="presentation">
								<image v-for="(imgItem, imgIndex) in 3" :key="imgIndex"
									src="../static/images/supermarket/头像.png" mode="scaleToFill" />
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								<view class="people">
									105
									<text>人已购买</text>
									<span :class="{
                      'activity-ongoing': item.activityStatus === 'ongoing',
                      'activity-ended': item.activityStatus === 'ended',
                    }">
										{{
                      item.activityStatus === "ongoing"
                        ? "活动进行中"
                        : "活动已结束"
                    }}
									</span>
								</view>
							</view>
							<view class="share">分享商品</view>
						</view>
					</view>
				</view>
			</view>

			<view class="all" v-if="currentTab === '团长专区'">
				<!-- 显示团长专区的内容 -->
				<p>这是团长专区的界面。</p>
				<view class="cards">
					<view class="card" v-for="(item, index) in items" :key="index">
						<view class="top">
							<view class="left">
								<image src="../static/images/supermarket/头像.png" mode="scaleToFill" />
								<view class="name">红月亮超市</view>
							</view>
							<view class="love">+关注</view>
						</view>
						<view class="middle">
							<view class="texts">
								真花摆设向日葵客厅电视柜装饰摆件玄关桌面餐桌花摆花
							</view>
							<view class="price">￥88-826</view>
							<view class="presentation">
								<image v-for="(imgItem, imgIndex) in 3" :key="imgIndex"
									src="../static/images/supermarket/头像.png" mode="scaleToFill" />
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								<view class="people">
									105
									<text>人已购买</text>
									<span :class="{
                      'activity-ongoing': item.activityStatus === 'ongoing',
                      'activity-ended': item.activityStatus === 'ended',
                    }">
										{{
                      item.activityStatus === "ongoing"
                        ? "活动进行中"
                        : "活动已结束"
                    }}
									</span>
								</view>
							</view>
							<view class="share">分享商品</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: "全部"
				}, {
					name: "特价专区"
				}, {
					name: "团长专区"
				}],
				currentTab: "全部",
				items: [{
						activityStatus: "ongoing"
					},
					{
						activityStatus: "ended"
					},
					{
						activityStatus: "ongoing"
					},
				],

				list: [],
				page: 1,
				total_page: 1,
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			click(item) {
				console.log("item", item);
				this.currentTab = item.name;
			},
			jump() {
				uni.navigateTo({
					url: "/pages/productDetail/productDetail",
				});
			},
			getList() {
				uni.request({
					url: "/wanlshop/product/groupsList",
					method: "GET",
					success: res => {
						console.log('-=-=-=res', res)
					}
				})
			}
		},
	};
</script>

<style lang='scss' scoped>
	.pages {
		height: 200vh;
		background: #f6f6f6;
		margin: 15rpx 25rpx;
	}

	.cards {
		margin-top: 20rpx;

		.card {
			padding: 30rpx;
			background: #ffffff;
			margin-bottom: 30rpx;
			border-radius: 15rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f1f1f1;

				.left {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 15rpx;
					}

					.name {
						font-size: 34rpx;
						color: #121212;
						margin-left: 25rpx;
						font-weight: 500;
					}
				}

				.love {
					width: 124rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #e60013;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: #ffffff;
					text-align: center;
					font-weight: 500;
				}
			}

			.middle {
				padding: 25rpx 0;

				.texts {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.price {
					font-weight: bold;
					font-size: 32rpx;
					color: #e60013;
					padding: 25rpx 0;
				}

				.presentation {
					display: flex;
					justify-content: space-between;

					image {
						width: 200rpx;
						height: 210rpx;
						border-radius: 15rpx;
					}
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.people {
						font-size: 28rpx;
						color: #888888;

						text {
							font-size: 28rpx;
							color: #888888;
							margin-right: 15rpx;
						}

						.activity-ongoing {
							color: #46c819;
						}

						.activity-ended {
							color: #999999;
						}
					}
				}

				.share {
					width: 124rpx;
					height: 50rpx;
					line-height: 50rpx;
					border: 1px solid #e60013;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: #e60013;
					text-align: center;
				}
			}
		}
	}
</style>